<template>
  <div style="position: relative; padding: 0; margin: 0">
    <Previewer ref="viewer" style="padding: 0; margin: 0" />
  </div>
</template>
<script lang="ts" setup>
import type { ComponentDataType } from "@/RtDataView/RonTonDataView";
import {
  Previewer,
  useSnapshotState,
  useUserStoreWithOut
} from "@/RtDataView/RonTonDataView";
import { ref, onMounted } from "vue";
import getURL from "@/utils/http/address";
import { getToken } from "@/utils/auth";
const viewer = ref();

const snapShotState = useSnapshotState(); //获取预览数据
const userData = useUserStoreWithOut();
onMounted(async () => {
  //设置Token，以便访问服务器数据
  userData.setToken("Bearer " + getToken().accessToken);
  userData.setServerURL(getURL + "/api/DataView/");
  const snapshot = await snapShotState.latestRecord();
  if (snapshot) {
    viewer.value!.setLayoutData({
      canvasData: snapshot.canvasData as ComponentDataType[],
      canvasStyle: snapshot.canvasStyle,
      dataSlotters: snapshot.dataSlotters
    });
  }
});
</script>
